<template>
	<view class="publish-match-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">发布比赛</text>
		</view>
		
		<!-- 发布比赛表单 -->
			<scroll-view class="form-content" scroll-y>
				<!-- 基本信息 -->
				<view class="form-section">
					<view class="section-header">基本信息</view>
					
					<view class="form-item">
						<text class="form-label">比赛名称 *</text>
						<input 
							class="form-input" 
							v-model="formData.title" 
							placeholder="请输入比赛名称"
							maxlength="100"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">比赛地区 *</text>
						<input 
							class="form-input" 
							v-model="formData.location" 
							placeholder="请输入比赛地区"
							maxlength="200"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">比赛时间 *</text>
						<view class="time-range-container">
							<picker 
								mode="date" 
								:value="formData.start_date"
								@change="onStartDateChange"
							>
								<view class="time-part">
									{{ formData.start_date || '请选择开始日期' }}
								</view>
							</picker>
							<view class="time-separator">至</view>
							<picker 
								mode="date" 
								:value="formData.end_date"
								@change="onEndDateChange"
							>
								<view class="time-part">
									{{ formData.end_date || '请选择结束日期' }}
								</view>
							</picker>
						</view>
					</view>
					
					<view class="form-item">
						<text class="form-label">比赛级别 *</text>
						<picker :value="levelIndex" :range="matchLevels" @change="onLevelChange">
							<view class="form-picker">{{ formData.level }}</view>
						</picker>
					</view>
					
					<view class="form-item">
						<text class="form-label">赛制 *</text>
						<picker :value="matchFormatIndex" :range="matchFormats" @change="onMatchFormatChange">
							<view class="form-picker">{{ formData.match_format }}</view>
						</picker>
					</view>
					
					<view class="form-item">
					<text class="form-label">参赛组别 *</text>
					<picker :value="ageGroupIndex" :range="ageGroups" @change="onAgeGroupChange">
						<view class="form-picker">{{ formData.age_groups }}</view>
						</picker>
					</view>
					
					<view class="form-item">
						<text class="form-label">比赛描述</text>
						<textarea 
							class="form-textarea" 
							v-model="formData.description" 
							placeholder="请输入比赛描述"
							maxlength="1000"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">补充说明</text>
						<textarea 
							class="form-textarea" 
							v-model="formData.additional_notes" 
							placeholder="请输入补充说明"
							maxlength="500"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">报名截止日期 *</text>
						<picker 
							mode="date" 
							:value="formData.registration_deadline"
							@change="onDeadlineChange"
						>
							<view class="form-picker">
								{{ formData.registration_deadline || '请选择截止日期' }}
							</view>
						</picker>
					</view>
				</view>
				

				
				<!-- 提交按钮 -->
				<view class="submit-section">
					<button class="save-draft-btn" @click="saveDraft" :disabled="submitting">保存草稿</button>
					<button class="publish-btn" @click="publishMatch" :disabled="submitting">发布比赛</button>
				</view>
			</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			submitting: false,
			
			// 表单数据
			formData: {
				title: '',
				location: '',
				start_date: '',
				end_date: '',
				level: '校级',
				match_format: '十一人制',
				age_groups: '青少组/男子组',
				description: '',
				additional_notes: '',
				registration_deadline: ''
			},
			
			// 选择器索引
			levelIndex: 0,
			ageGroupIndex: 0,
			matchFormatIndex: 0,
			
			// 选择器选项
			matchLevels: ['校级', '区级', '市级', '省级', '国家级', '国际级'],
			ageGroups: ['青少组/男子组', '青少组/女子组', '成人组/男子组', '成人组/女子组'],
			matchFormats: ['十一人制', '七人制', '五人制']
		}
	},
	
	onLoad() {
		// 页面加载时重置表单
		this.resetForm()
	},
	
	methods: {
		// 重置表单
		resetForm() {
			this.formData = {
				title: '',
				location: '',
				start_date: '',
				end_date: '',
				level: '校级',
				match_format: '十一人制',
				age_groups: '青少组/男子组',
				description: '',
				additional_notes: '',
				registration_deadline: ''
			}
			this.levelIndex = 0
			this.ageGroupIndex = 0
			this.matchFormatIndex = 0
		},
		
		// 时间选择器事件
		onStartDateChange(e) {
			this.formData.start_date = e.detail.value
		},
		
		onEndDateChange(e) {
			this.formData.end_date = e.detail.value
		},
		
		onDeadlineChange(e) {
			this.formData.registration_deadline = e.detail.value
		},
		
		// 级别选择器事件
		onLevelChange(e) {
			this.levelIndex = e.detail.value
			this.formData.level = this.matchLevels[this.levelIndex]
		},
		
		// 赛制选择器事件
		onMatchFormatChange(e) {
			this.matchFormatIndex = e.detail.value
			this.formData.match_format = this.matchFormats[this.matchFormatIndex]
		},
		
		// 参赛组别选择器事件
		onAgeGroupChange(e) {
			this.ageGroupIndex = e.detail.value
			this.formData.age_groups = this.ageGroups[this.ageGroupIndex]
		},
		

		
		// 保存草稿
		async saveDraft() {
			if (!this.validateForm()) return
			
			await this.submitMatch('draft')
		},
		
		// 发布比赛
		async publishMatch() {
			if (!this.validateForm(true)) return
			
			await this.submitMatch('published')
		},
		
		// 提交比赛
		async submitMatch(status) {
			this.submitting = true
			try {
				uni.showLoading({
					title: status === 'draft' ? '保存中...' : '发布中...'
				})
				
				const matchObject = uniCloud.importObject('match-object')
				const matchData = {
					...this.formData,
					status: status
				}
				
				const result = await matchObject.createMatch(matchData)
				
				uni.hideLoading()
				
				if (result.code === 0) {
					uni.showToast({
						title: status === 'draft' ? '保存成功' : '发布成功',
						icon: 'success'
					})
					
					// 重置表单
					this.resetForm()
					
					// 发布成功后的处理
					setTimeout(() => {
						if (status === 'published') {
						uni.showModal({
								title: '比赛发布成功',
								content: '比赛已成功发布！裁判员可以开始报名申请，您可以在比赛管理中进行选派和审核。执裁记录将在选派确认后自动生成。',
								confirmText: '查看比赛',
								cancelText: '知道了',
							success: (res) => {
								if (res.confirm) {
										this.showViewMatchOption()
									}
								}
							})
						} else {
							// 草稿保存后的处理
							this.showViewMatchOption()
							}
					}, 1500)
				} else {
					this.handleError(result.message || '操作失败')
				}
			} catch (error) {
				uni.hideLoading()
				this.handleError('网络错误: ' + error.message)
			} finally {
				this.submitting = false
			}
		},
		
		// 表单验证
		validateForm(isPublish = false) {
			if (!this.formData.title.trim()) {
				this.handleError('请输入比赛名称')
				return false
			}
			
			if (!this.formData.location.trim()) {
				this.handleError('请输入比赛地点')
				return false
			}
			
			if (!this.formData.start_date) {
				this.handleError('请选择开始日期')
				return false
			}
			
			if (!this.formData.end_date) {
				this.handleError('请选择结束日期')
				return false
			}
			
			if (new Date(this.formData.start_date) > new Date(this.formData.end_date)) {
				this.handleError('开始日期不能晚于结束日期')
				return false
			}
			
			if (isPublish && !this.formData.registration_deadline) {
				this.handleError('请选择报名截止日期')
				return false
			}
			
			return true
		},
		
		// 错误处理
		handleError(message) {
			uni.showToast({
				title: message,
				icon: 'none'
			})
		},
		
				// 显示查看比赛选项
		showViewMatchOption() {
			uni.showModal({
				title: '提示',
				content: '是否查看已发布的比赛？',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/competition/competition'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.publish-match-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

.page-header {
	background-color: #fff;
	padding: 30rpx 20rpx;
	text-align: center;
	border-bottom: 2rpx solid #f0f0f0;
	width: 100%;
	box-sizing: border-box;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.form-content {
	height: calc(100vh - 120rpx);
	padding: 20rpx;
	box-sizing: border-box;
}

.form-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	width: 100%;
}

.section-header {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
	width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
}

.form-item {
	margin-bottom: 30rpx;
	width: 100%;
	box-sizing: border-box;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
	word-wrap: break-word;
	width: 100%;
	box-sizing: border-box;
}

.form-input,
.form-picker {
	width: 100%;
	height: 88rpx;
	padding: 0 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 28rpx;
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	line-height: 1.2;
}

.form-input {
	color: #333;
}

.form-input::placeholder {
	color: #999;
}

.form-textarea {
	width: 100%;
	min-height: 160rpx;
	padding: 20rpx 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 28rpx;
	resize: none;
	box-sizing: border-box;
	display: block;
	line-height: 1.5;
}

.time-range-container {
	display: flex;
	align-items: center;
	gap: 20rpx;
	width: 100%;
	box-sizing: border-box;
}

.time-part {
	flex: 1;
	height: 88rpx;
	padding: 0 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 28rpx;
	text-align: center;
	background-color: #fff;
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

.time-separator {
	font-size: 28rpx;
	color: #666;
	flex-shrink: 0;
	padding: 0 10rpx;
}

.submit-section {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 0 40rpx;
	width: 100%;
	box-sizing: border-box;
}

.save-draft-btn,
.publish-btn {
	flex: 1;
	padding: 24rpx 0;
	border: none;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-sizing: border-box;
	min-width: 0;
	
	&:disabled {
		opacity: 0.5;
	}
}

.save-draft-btn {
	background-color: #f0f0f0;
	color: #666;
}

.publish-btn {
	background-color: #1BAE76;
	color: white;
}
</style> 